<template>
  <el-row style="padding: 10px 20px" class="indexPage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item class="breadcrumb"><img style="width: 16px;vertical-align: middle;margin-right: 5px" src="@/assets/indexPage/location.png"/> 首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="marginTop10">
      <el-form ref="formData" label-position="right" :model="form" size="small">
        <el-col :span="4">
          <el-form-item label="单位" prop="companyCode" label-width="50px">
            <el-select v-model="form.companyCode" placeholder="请选择单位" @change="companyChange" clearable>
              <el-option v-for="(item, idx) in tree" :label="item.companyName" :value="item.companyCode" :key="item.companyCode + idx"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="场站" prop="stationName" label-width="50px">
            <el-select v-model="form.stationCode" placeholder="请选择场站" @change="stationChange" clearable>
              <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="9">-->
<!--          <el-form-item label="时间" class="searchItem" label-width="80px">-->
<!--            <el-date-picker style="width: 100%"-->
<!--              v-model="form.inspectDay"-->
<!--              type="daterange"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--            >-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="5">-->
<!--          <el-form-item label="任务编号" class="searchItem" label-width="110px">-->
<!--            <el-select v-model="form.inspectTaskCode" placeholder="请选择任务" clearable>-->
<!--              <el-option v-for="item in taskNumberList" :label="item.inspectTaskCode" :value="item.inspectTaskCode"  :key='item.inspectTaskCode'></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="2">
          <el-form-item class="searchItem">
            <el-button type="primary" icon="el-icon-search" @click="submit" style="float:right;">查询</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <el-row class="marginTop10">
      <el-col :span="24">
        <el-card>
          <h3 class="echartsTitle">最近一年诊断统计</h3>
          <el-row class="marginTop10">
<!--            <el-form ref="formData1" :inline="true" :model="formData1" label-width="100" size="small">-->
<!--              <el-form-item label="开始时间" class="searchItem" label-width="110px">-->
<!--                <el-date-picker style="max-width: 300px"-->
<!--                                v-model="formData1.inspectDay"-->
<!--                                type="daterange"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期"-->
<!--                                @change="lineChange"-->
<!--                >-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
              <!--              <el-form-item label="诊断模型" class="searchItem bigItem fr">-->
              <!--                <el-select v-model="formData1.modelCodeList" placeholder="场站名称" multiple clearable filterable>-->
              <!--                  <el-option v-for="item in outerModelList" :label="item.diagModelName" :value="item.diagModelCode" :key="item.id"></el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
<!--            </el-form>-->
          </el-row>
          <comLine :lineParams="lineParams" />
        </el-card>
      </el-col>
    </el-row>

    <el-row class="marginTop10">
      <el-card>
        <el-col class="echartsTitle" :span="24">
          <h3 style="line-height: 40px" class="fl">最近一次诊断信息</h3>
          <span style="line-height: 40px" v-if="taskNumberList[0]" class="fl">&emsp;（启动时间: {{form.inspectDay}} &emsp;任务编号: {{taskNumberList[0].inspectTaskCode}}）</span>
          <el-button type="text" @click="goto" class="fr" size="small">查看诊断结果详情>></el-button>
        </el-col>
        <el-form ref="formData2" label-position="right" :model="formData1" size="small">
<!--          <el-col :span="4">-->
<!--            <el-form-item label="单位" prop="companyCode" label-width="50px">-->
<!--              <el-select v-model="form.companyCode" placeholder="请选择单位" @change="companyChange" clearable>-->
<!--                <el-option v-for="(item, idx) in tree" :label="item.companyName" :value="item.companyCode" :key="item.companyCode + idx"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="4">-->
<!--            <el-form-item label="场站" prop="stationName" label-width="50px">-->
<!--              <el-select v-model="form.stationCode" placeholder="请选择场站" @change="stationChange" clearable>-->
<!--                <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="9">-->
<!--            <el-form-item label="时间" class="searchItem" label-width="40px">-->
<!--              <el-date-picker style="width: 100%"-->
<!--                              v-model="formData1.inspectDay"-->
<!--                              type="daterange"-->
<!--                              start-placeholder="开始日期"-->
<!--                              end-placeholder="结束日期"-->
<!--              >-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="5">-->
<!--            <el-form-item label="任务编号" class="searchItem" label-width="110px">-->
<!--              <el-select v-model="formData1.inspectTaskCode" placeholder="请选择任务" clearable>-->
<!--                <el-option v-for="item in taskNumberList" :label="item.inspectTaskCode" :value="item.inspectTaskCode"  :key='item.inspectTaskCode'></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <el-form-item class="searchItem">-->
<!--              <el-button type="primary" icon="el-icon-search" @click="submit1" style="float:right;">查询</el-button>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-form>
      </el-card>
<!--      <el-col :span="14">-->
<!--        <el-card>-->
<!--          <div style="position: relative">-->
<!--            <el-input class="selfInput" size="small" suffix-icon="el-icon-search" placeholder="请输入经纬度，以逗号隔开" v-model="local"></el-input>-->
<!--            <com-map></com-map>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
      <el-col :span="7" class="marginTop10">
        <el-card>
<!--          <h3 class="echartsTitle">故障分布</h3>-->
<!--          <el-row class="">-->
<!--            <el-form ref="formData1" :model="formData1" label-width="100" size="small" class="text-center" style="display: flex;">-->
<!--              <el-col :span="24">-->
<!--                <el-form-item label="任务编号" class="searchItem" label-width="110px">-->
<!--                  <el-select v-model="formData1.inspectTaskCode" placeholder="请选择任务" clearable @change="barChange">-->
<!--                    <el-option v-for="item in taskNumberList" :label="item.inspectTaskCode" :value="item.inspectTaskCode"  :key='item.inspectTaskCode'></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-form>-->
<!--          </el-row>-->
          <com-bar :barParams="barParams"/>
        </el-card>
      </el-col>
      <el-col :span="17" style="padding-left: 10px" class="marginTop10">
          <el-table v-loading="isLoading" :cell-style="cellStyle" size="small" ref="tableData" :data="tableData" key="saleOrder" style="border-radius: 5px;" height="calc((100vh - 217px) / 2)" border stripe :span-method="arraySpanMethod">
              <el-table-column property="memberId" show-overflow-tooltip label="方阵" width="100px">
                <template slot-scope="scope">
                  <div class="tableContent background1 text-center">
                    <div class="top">
                      <i class="el-icon-aim"></i>
                      <span>{{scope.row.matrixCode}}</span>
                      <div>
                        <span>{{scope.row.matrixNum}}个</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="createTime" show-overflow-tooltip label="组串">
                <template slot-scope="scope">
                  <div class="tableContent background3">
                    <div class="top">
                      <span>{{scope.row.pvClusterCode}}</span>
                      <span class="fr">{{scope.row.pvClusterNum}}个</span>
                    </div>
                    <div>
                      <span>{{scope.row.pvClusterLocation}}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="payAmount" show-overflow-tooltip label="组件">
                <template slot-scope="scope">
                  <div class="tableContent background2">
                    <div class="top">
                      <span>{{scope.row.pvModuleCode}}</span>
                      <span class="fr">{{scope.row.pvModuleNum}}个</span>
                    </div>
                    <div>
                      <span>{{scope.row.pvModuleLocation}}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
          </el-table>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
  import comBar from "../../components/echarts/bar2"
  import comLine from "../../components/echarts/line"
  import comMap from "../../components/echarts/map"
  import manualApi from "../../api/manual";
  import homeApi from "../../api/homeApi";
  import utils from "../../utils/index"
  export default {
    name: "index",
    components: {
      comBar,
      comLine,
      comMap
    },
    data() {
      return {
        tree: [],
        local: "",
        taskNumberList: [],
        stationList: [],
        isLoading: false,
        outerModelList: [],
        lineParams: [],
        row1SpanList: [],
        flag: true,
        row2SpanList: [],
        form: {
          companyCode: '',
          inspectTaskCode: '',
          stationCode: '',
          stationName: '',
          startTime: new Date().getTime() - 365 * 24 * 3600 * 1000,
          title: []
        },
        barParams: [],
        formData1: {
          inspectTaskCode: ""
        },
        formData2: {},
        tableData: [{}, {}, {}, {}, {}, {}, {}]
      }
    },
    mounted() {
      this.getCompanyList()
      this.getOuterModelList()
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if(columnIndex === 0 ) {
          // const _row = (this.setTable(this.tableData).one)[rowIndex];
          // const _col = _row > 0 ? 1 : 0;
          // return {
          //   rowspan: _row,
          //   colspan: _col
          // };
        }
        // if(columnIndex === 1 || columnIndex === 15) {
        //   const _row = (this.setTable(this.tableData).two)[rowIndex];
        //   const _col = _row > 0 ? 1 : 0;
        //   return {
        //     rowspan: _row,
        //     colspan: _col
        //   };
        // }
      },
      cellStyle({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          return "background: #DBE6FD"
        } else if (columnIndex === 1) {
          return "background: #EFF4FE"
        } else if (columnIndex === 2) {
          return "background: #FFFFFF"
        }
      },
      companyChange(value) {
        if (!value) {
          this.stationList = []
          this.taskNumberList = []
          this.form.companyCode = ''
          this.form.inspectTaskCode = ''
          this.form.stationName = ''
          return
        }
        manualApi.getStationByCompany({
          companyCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
            this.$nextTick(() => {
              this.form.stationCode = this.stationList[0].stationCode
              if (this.flag) {
                this.form.stationCode = "xgsgfdz"
                this.submit()
                this.flag = false
              }
              this.stationChange(this.form.stationCode)
            })
          }
        })
      },
      getOuterModelList() {
        manualApi.getOuterModelList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.outerModelList = res.data.data
          }
        })
      },
      getCompanyList() {
        manualApi.getCompanyList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.tree = res.data.data
            manualApi.getCompanyList({username: this.$store.state.user.name}).then(data => {
              this.$nextTick(() => {
                this.form.companyCode = data.data.data[0].companyCode
                this.companyChange(this.form.companyCode)
              })
            }).catch(e => {
                this.$message.error({message: e.message ? e.message : e, center: true})
            })
          }
        })
      },
      stationChange(value) {
        if (!value) {
          this.stationName = ''
          this.taskNumberList = []
          this.form.inspectTaskCode = ''
          return
        }
        // manualApi.getTaskNumberByCompany({
        //   companyCode: this.form.companyCode,
        //   stationCode: value
        // }).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.taskNumberList = res.data.data
        //     this.$nextTick(() => {
        //       this.form.inspectTaskCode = this.taskNumberList[0]
        //       this.formData1.inspectTaskCode = this.taskNumberList[0]
        //       this.barChange()
        //       this.lineChange()
        //       this.submit()
        //     })
        //   }
        // })
      },

      barChange() {
        homeApi.selectDiagClassifiedStatistic({companyCode: this.form.companyCode, stationCode: this.form.stationCode, inspectTaskCode: this.taskNumberList[0].inspectTaskCode}).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.barParams = []
            res.data.data.map(item => {
              const params = {
                value: item.defectNum,
                name: item.diagModelName
              }
              this.barParams.push(params)
            })
          }
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      lineChange() {
        // if (this.formData1.inspectDay && (new Date(this.formData1.inspectDay[1]).getTime() - new Date(this.formData1.inspectDay[0]).getTime() > 1000 * 3600 * 24 * 365)) {
        //   this.$message.error("时间范围不能大于一年")
        //   return
        // }
        homeApi.selectFaultTrendAnalysis({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          startTime: utils.parseTime(this.form.startTime, "{y}-{m}-{d} {h}:{i}:{s}"),
          endTime: utils.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.lineParams = {
              params: res.data.data,
              modelCodeList: this.formData1.modelCodeList
            }
          }
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      setTable(tableData) {
        const one = []
        this.tableData.map((item, index) => {
          if (index === 0) {
            one.push(this.row1SpanList[0])
          } else if (item.pvArrayCode === this.tableData[index - 1].pvArrayCode) {
            one.push(0)
          } else if (item.pvArrayCode !== this.tableData[index - 1].pvArrayCode) {
            one.push(this.row1SpanList[1])
          }
        })
      },
      getTableData() {
        this.isLoading = true
        homeApi.selectArrayStringModuleDefect({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          startTime: utils.parseTime(this.form.startTime, "{y}-{m}-{d} {h}:{i}:{s}"),
          endTime: utils.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
          inspectTaskCode: this.form.inspectTaskCode
        }).then(res => {
          this.isLoading = false
          if (res && res.status === 200 && res.data.code === 200) {
            this.tableData = []
            this.row1SpanList = []
            this.row2SpanList = []
            res.data.data.map(item1 => {
              let temNum = 0
              item1.stringDefectiveResultDTOS.map(item2 => {
                temNum += item2.moduleDefectiveResultDTOList.length
                this.row2SpanList.push(item2.moduleDefectiveResultDTOList.length) // 获取行2合并数量的list
                item2.moduleDefectiveResultDTOList.map(item3 => {
                  const tableItem = {
                    matrixNum: item1.detectNum,
                    matrixCode: item1.pvArrayCode,
                    pvClusterNum: item2.detectNum,
                    pvClusterLocation: item2.strCLatLng,
                    pvClusterCode: item2.pvStringCode,
                    pvModuleNum: item3.detectNum,
                    pvModuleCode: item3.pvModuleCode,
                    pvModuleLocation: item3.moduleCLatLng
                  }
                  this.tableData.push(tableItem)
                })
              })
              this.row1SpanList.push(temNum)
            })
            this.setTable(this.tableData)
          }
        }).catch(e => {
          this.isLoading = false
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      goto() {
        this.$router.push({
          path: "/taskResult/resultDetail/index",
          query: {inspectTaskCode: this.taskNumberList[0].inspectTaskCode}
        })
      },
      submit() {
        // 先获取公司和场站下的任务编号，再获取图表数据
        manualApi.listInspectTaskCode({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.taskNumberList = res.data.data
            this.$nextTick(() => {
              console.log("res.data.data", res.data.data)
              this.form.inspectTaskCode = this.taskNumberList[0].inspectTaskCode
              this.formData1.inspectTaskCode = this.taskNumberList[0].inspectTaskCode
              this.form.inspectDay = this.taskNumberList[0].inspectDay
              this.formData1.inspectDay = this.taskNumberList[0].inspectDay
              this.getTableData()
              this.barChange()
              this.lineChange()
            })
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })

      }
    }
  }
</script>

<style lang="scss">
  .indexPage{
    .el-breadcrumb span{
      font-weight: bold!important;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
      margin-bottom: 0;
    }
    .el-card__body{
      padding: 10px;
    }
    .echartsTitle{
      color: rgba(57,119,243,1);
    }
    .tableSubTitle{
      font-size: 12px;
      font-weight: normal;
    }
    .selfInput{
      position: absolute;
      top: 20px;
      left: calc(50% - 150px);
      z-index: 99;
      width: 300px;
      input{
        border-radius: 50px;
        border-color: #3977f3;
      }
      input::-webkit-input-placeholder{
        color:#3977F3;
      }
      input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:#3977F3;
      }
      input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:#3977F3;
      }
      input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color:#3977F3;
      }
    }
    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-color: #3977F3;
    }
    .tableContent{
      span, i{
        color: #3977F3;
        font-size: 13px;
      }
      .top{
        font-size: 16px;
        font-weight: bold;
      }
      .background1{
        background-color: #DCE6FE;
      }
      .background2{
        background-color: #F0F3FD;
      }
      .background3{
        background-color: #FDFFFD;
      }
    }
    .el-form-item__label{
      font-size: 12px;
    }
  }
</style>
